<template>
  <virtual-selector
    ref="vSelector"
    :value="value"
    :list="airList"
    :placeholder="`${selectName}`"
    :style="`minWidth: ${width}`"
    :max-tag-count="maxTagCount"
    :mode="mode"
    :show-num="showNum"
    :tooltip="true"
    :show-search="showSearch"
    :option="{
      itemNameKey:valueKey,
      itemValueKey:valueKey,
      itemPageSize:10,
      itemGap: 0,
    }"
    @changeValueHandler="changeValueHandler"
  />
</template>

<script>
import { mapState } from 'vuex';
import virtualSelector from '@/pages/components/virtualSelector';
export default {
  components: {
    virtualSelector
  },
  model: {
    prop: 'value',
    event: 'changeValueHandler'
  },
  props: {
    type: {
      type: String,
      default: 'dep'
    },
    showNum: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '148px'
    },
    mode: {
      type: String,
      default: 'multiple'
    },
    value: {
      type: [Array, String],
      default: () => []
    },
    valueKey: {
      type: String,
      default: 'threeCode'
    },
    nameKey: {
      type: String,
      default: 'name'
    },
    maxTagCount: {
      type: Number,
      default: 1
    },
    placeholder: {
      type: String,
      default: ''
    },
    showSearch: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState('fraMonitoring', [
      'depList',
      'arrList'
    ]),
    airList() {
      if (this.type === 'dep') {
        return this.depList;
      } else {
        return this.arrList;
      }
    },
    selectName() {
      if (this.type === 'dep') {
        return this.placeholder || '起飞机场';
      } else {
        return this.placeholder || '到达机场';
      }
    }
  },

  watch: {
    value(nv, ov) {
      this.setValueHandler();
      this.$emit('changeValueHandler', nv);
    }
  },
  mounted() {
    this.setValueHandler();
  },
  methods: {

    changeValueHandler(nv) {
      this.$emit('changeValueHandler', nv);
      this.$emit('changeT', nv);
    },
    setValueHandler() {
      this.$refs.vSelector.showValue = this.value;
    }
  }

};
</script>

<style>

</style>
